<template>
  <div class="wrap w-gy w-cg detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        医院认证
    </header>
    <div class="content">
        <p class="tit">请提交注册信息</p>
        <form action="">
            <div class="group" v-for="(item,index) in msg" :key="index">
                <label>
                    {{item.label}}
                    <input @blur="getVal" :type="item.type" :placeholder="item.placehold" :id="item.id" :data-index="index" value=""/>
                </label>
            </div>

             <div class="group content-block">
                <label>
                    所在省市
                    <input :value="address_txt" @click="showAddressPicker" type="text" readonly placeholder="请选择" />
                </label>
            </div>
            <div class="group">
                <label>
                    通讯地址
                    <input @blur="getVal1" type="text" placeholder="请填写" data-tag="post_addr" value="" />
                </label>
            </div>
            <div class="group content-block leixing">
                <label>
                    医院类型
                    <input :value="type_txt" @click="showTypePicker"  type="text" readonly placeholder="请选择" />
                </label>
            </div>
            <div class="group">
                <label>
                    税务登记号
                    <input @blur="getVal1" type="text" placeholder="请填写" data-tag="tax_register_num" value="" />
                </label>
            </div>
            <div class="group">
                <label>
                    邀请码
                    <input @blur="getVal1" type="text" placeholder="选填" data-tag="invite_code" value="" />
                </label>
            </div>
            <div class="group group-img">
                <label>
                    营业执照扫描件
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="1"
                      @files-added="filesAdded"
                      @file-success="yingyeSuccess"
                      @file-removed="delImg('yingyeImg')" />
            </div>
            <div class="group group-img">
                <label>
                    医疗机构执业许可证
                </label>
                    <cube-upload
                      :action="action"
                      :simultaneous-uploads="1"
                      :max="1"
                      @files-added="filesAdded"
                      @file-success="zhiyeSuccess"
                      @file-removed="delImg('zhiyeImg')" />
            </div>
           
            <div class="ok">
                <button type="button" @click="submit">立即认证</button>
            </div>
        </form>
    </div>

</div>


</template>
<script>
import { provinceList, cityList, areaList } from '@/area'
const addressData = provinceList
addressData.forEach(province => {
  province.children = cityList[province.value]
  province.children.forEach(city => {
    city.children = areaList[city.value]
  })
})
//类型选数据
const typeData = [
  {
    value: '请选择',
    text: '请选择',
    children: []
  },
  {
    value: '诊所',
    text: '诊所',
    children: [{value:"中医诊所", text:"中医诊所"},
    {value:"中西医结合诊所", text:"中西医结合诊所"},
    {value:"民族医院诊所", text:"民族医院诊所"},
    {value:"口腔诊所", text:"口腔诊所"},
    {value:"美容整形外科诊所", text:"美容整形外科诊所"},
    {value:"医疗美容诊所", text:"医疗美容诊所"},
    {value:"精神卫生诊所", text:"精神卫生诊所"},
    {value:"中小学卫生保健所", text:"中小学卫生保健所"}
    ]
  },
  {
    value: '门诊部',
    text: '门诊部',
    children: [{value:"综合门诊部", text:"综合门诊部"},
    {value:"中医门诊部", text:"中医门诊部"},
    {value:"中西医结合门诊部", text:"中西医结合门诊部"},
    {value:"民族医门诊部", text:"民族医门诊部"},
    {value:"专科门诊部", text:"专科门诊部"},
    {value:"口腔门诊部", text:"口腔门诊部"},
    {value:"整形外科门诊部", text:"整形外科门诊部"},
    {value:"医疗美容门诊部", text:"医疗美容门诊部"}

    ]
  },
  {
    value: '专科医院',
    text: '专科医院',
    children: [{value:"心血管医院", text:"心血管医院"},
    {value:"血液病医院", text:"血液病医院"},
    {value:"疗养院", text:"疗养院"},
    {value:"妇幼保健院", text:"妇幼保健院"},
    {value:"康复医院", text:"康复医院"},
    {value:"精神病医院", text:"精神病医院"},
    {value:"皮肤病医院", text:"皮肤病医院"},
    {value:"美容整容医院", text:"美容整容医院"},
    {value:"肿瘤医院", text:"肿瘤医院"},
    {value:"口腔医院", text:"口腔医院"},
    {value:"眼科医院", text:"眼科医院"}
    ]
  },
  {
    value: '综合医院',
    text: '综合医院',
    children: [
    {value:"部级院", text:"部级院"},
    {value:"部队医院", text:"部队医院"},
    {value:"省级医院", text:"省级医院"},
    {value:"市级医院", text:"市级医院"},
    {value:"县级以下医院", text:"县级以下医院"},
    {value:"县级医院", text:"县级医院"},      
    ]
  },
  {
    value: '卫生院',
    text: '卫生院',
    children: [
    {value:"一般卫生院", text:"一般卫生院"},
    {value:"二级卫生院", text:"二级卫生院"},
    ]
  },
  {
    value: '社会服务中心站',
    text: '社会服务中心站',
    children: [
      
    ]
  },
  {
    value: '医疗防疫血站',
    text: '医疗防疫血站',
    children: [
      
    ]
  },
  {
    value: '临床检验中心',
    text: '临床检验中心',
    children: [
      
    ]
  },
  {
    value: '民族医院',
    text: '民族医院',
    children: [
      
    ]
  },
  {
    value: '村卫生室',
    text: '村卫生室',
    children: [
      
    ]
  },
  {
    value: '互联网医院',
    text: '互联网医院',
    children: [
      
    ]
  },
  {
    value: '其他医疗机构',
    text: '其他医疗机构',
    children: [
      
    ]
  }
]
    
export default {
  data(){
    return{
        action: {
            target: this.api_url+'/index/upfile/',
            fileName:'fileData',
            // prop: 'base64Value'
        },
        msg: [{  //  用户名至负责人循环数据
          label: '登录名',
          id: 'user_name',
          type: 'text',
          placehold: '大小写字母数字5-15位',
          bindinput: 'getVal',
          val: '',
          reg: '^[A-Za-z0-9]{5,15}$'
        }, {
          label: '密码',
          id: 'user_pass',
          type: 'password',
          placehold: '6~18 大小写字母数字',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '确认密码',
          id: 'aginPwd',
          type: 'password',
          placehold: '两次密码需一致',
          bindinput: 'getVal',
          val: '',
          reg: '^[a-zA-Z0-9]{6,18}$'
        }, {
          label: '医院名称',
          id: 'company_name',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9_]{2,40}$'
        },{
          label: '负责人',
          id: 'agent',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal',
          val: '',
          reg: '^[\u4E00-\u9FA5A-Za-z0-9]{2,40}$'
        }],

        //医院类型
        hospital_type1: 0,
        hospital_type2: 0,       
        post_addr:'',
        tax_register_num:'',
        //邀请码
        invite_code:'',

        yingyeImg: '',
        zhiyeImg:'',

        msg2: {
          label: '通讯地址',
          id: 'post_addr',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal2',
          val: '',
          reg: '^[\\S]{3,50}$'
        },
        msg3: {
          label: '税务登记号',
          id: 'tax_register_num',
          type: 'text',
          placehold: '请填写',
          bindinput: 'getVal3',
          val: '',
          reg: '^[A-Za-z0-9]{2,40}$'
        },
        
        province_id: '',
        city_id: '',
        area_id: '',
        address_txt:'',//地址，文字
        type_txt:'',//医院类型，文字

        checked: true, 
          
     }
  },
  created(){

  },
  
  mounted(){
    this.addressPicker = this.$createCascadePicker({
      title: '所在省市',
      data: addressData,
      onSelect: this.addressSelect,
      onCancel: this.cancelHandle
    })

    this.typePicker = this.$createCascadePicker({
      title: '医院类型',
      data: typeData,
      selectedIndex: [0, 1, 0],
      onSelect: this.typeSelect,
      onCancel: this.cancelHandle
    })
            
  },
  
  methods:{
    submit() {
        let that = this;
        let userInfo = this.getUserInfo()
        let formData ={}
        let arr = this.msg;
        for (let i = 0; i < arr.length; i++) {
                formData[arr[i].id] =arr[i].val;
          if (arr[i].val === "") {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `请输入${arr[i].label}`,
              icon: ''
             }).show()
            return false;
          } else if (new RegExp(arr[i].reg).test(arr[i].val) != true) {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `${arr[i].label}格式不正确`,
              icon: ''
             }).show()
            return false;
          }
        }
        if(this.post_addr == ""){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: `请输入通讯地址`,
              icon: ''
             }).show()
          return false;
        } else if (new RegExp('^.{2,40}$').test(this.post_addr) != true){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '通讯地址格式不正确',
              icon: ''
             }).show()
          return false;
        }else if (this.tax_register_num == "") {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请输入税务登记号',
              icon: ''
             }).show()
          return false;
        } else if (new RegExp('^[A-Za-z0-9]{2,40}$').test(this.tax_register_num) != true) {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '税务登记号格式不正确',
              icon: ''
             }).show()
          return false;
        }else if (arr[1].val != arr[2].val) {
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '两次密码不一致',
              icon: ''
             }).show()
          return false;
        } 
        if(this.province_id == "" || this.city_id == "" ||this.area_id == ""){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请选择省市',
              icon: ''
             }).show()
          return false;
         }
         if(this.hospital_type1 == 0){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请选择确认医院类型',
              icon: ''
             }).show()
                return false;
            }


        if(this.yingyeImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传营业执照扫描件',
              icon: ''
             }).show()
             return false;
        } 
         if(this.zhiyeImg == ''){
            this.$createDialog({
              type: 'alert',
              title: '提示',
              content: '请上传医疗机构执业许可证',
              icon: ''
             }).show()
             return false;
        } 


         formData['post_addr'] = this.post_addr //通信地址
         formData['tax_register_num'] = this.tax_register_num // 税务登记号

        formData['hospital_type1'] = this.hospital_type1;
        formData['hospital_type2'] = this.hospital_type2;

        formData['province_id'] = this.province_id;
        formData['city_id'] = this.city_id;
        formData['area_id'] = this.area_id;
        formData['yingyeImg'] = this.yingyeImg;
        formData['zhiyeImg'] = this.zhiyeImg;
        //邀请码
        formData['invite_code'] = this.invite_code;
        console.log(formData)
         this.$createDialog({
            type: 'confirm',
            icon: 'cubeic-alert',
            title: '提示',
            content: '可发布竞价信息，确认认证为采购方？',
            onConfirm: () => {
                let re =  this.$axios.post('/login/buyerRegister',{
                  formData:formData
                }).then(function(re){
                    if(re.code == 200){
                        userInfo.user_type = 10;//医院
                localStorage.setItem('userInfo',JSON.stringify(userInfo))
                            //   this.is_show = false
                            //   this.show_success = true
                            
                       that.$router.push({path:'/my/my'})

                        }else{
                            that.$createDialog({
                              type: 'alert',
                              title: '提示',
                              content: re.msg,
                              icon: ''
                             }).show()
                        }
                })
                 
            },
            onCancel: () => {
              this.$createToast({
                type: 'warn',
                time: 1000,
                txt: '未认证'
              }).show()
            }
          }).show()

      },
    
     getVal:function(e){
        let arr = this.msg;
        let obj = arr[e.currentTarget.getAttribute('data-index')]
        obj.val = e.target.value
        this.msg = arr
      },
      getVal1:function(e){
        let tag = e.currentTarget.getAttribute('data-tag')
        this[tag] = e.target.value
      },
      //弹出所在省市区
      showAddressPicker() {
          this.addressPicker.show()
      },
      //选中省市
      addressSelect(selectedVal, selectedIndex, selectedText) {
          this.province_id = selectedVal[0]
          this.city_id = selectedVal[1]
          this.area_id = selectedVal[2]
          this.address_txt=selectedText.join(' ')
      },

      //弹出医院类型
      showTypePicker() {
          this.typePicker.show()
      },
      //选中医院类型
       typeSelect(selectedVal, selectedIndex, selectedText) {
        this.hospital_type1 = selectedIndex[0];
        this.hospital_type2 = selectedIndex[1];
        this.type_txt = selectedText.join(' ');
        },
    //未选择
    cancelHandle() {
      this.$createToast({
        type: '',
        txt: '未选择',
        time: 1000
      }).show()
    },
    //上传那图片
      filesAdded(files) {
          //取图片文件，这里只取了数组中第一张图片
          const limitSize = 1 * 1024;
          const maxSize = 3 * 1024 * 1024;
          let hasIgnore = false
          for (let i = 0; i< files.length; i++) {
            const file = files[i];
            // 如果选择的图片大小最大限制（这里为3M）则弹出提示
            if(file.size > maxSize){
              file.ignore = true
               hasIgnore = true
            }
            
          }
            hasIgnore && this.$createDialog({
                  type: 'alert',
                  title: '提示',
                  content: '图片不能大于3M',
                  icon: ''
              }).show()
          // let fd = new FormData();
          // fd.append("fileData", files[0]);
          // let config = {
          //       headers:{'Content-Type':'multipart/form-data'}
          //     };      
          // this.$axios.post('/index/upfile',fd,config).then(function(data) {
          //     if(data.code==200){

          //     }

          // });

        },
        yingyeSuccess(res){
            if(res.response.code == 200){
                this.yingyeImg = res.response.data;
            }
        },
        zhiyeSuccess(res){
            if(res.response.code == 200){
                this.zhiyeImg = res.response.data;
            }
        },
        delImg(key){
            this[key] = '';
        },


  }
  


}
</script>